<template>
  <div class="match-three-container">
    <div class="game-header">
      <h1>🍭 消消乐</h1>
      <div class="game-stats">
        <div class="stat-card">
          <div class="stat-label">分数</div>
          <div class="stat-value">{{ score.toLocaleString() }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">关卡</div>
          <div class="stat-value">{{ currentLevel }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">移动</div>
          <div class="stat-value">{{ movesLeft }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">目标</div>
          <div class="stat-value">{{ targetScore.toLocaleString() }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">最高分</div>
          <div class="stat-value">{{ highScore.toLocaleString() }}</div>
        </div>
      </div>
    </div>

    <div class="game-content">
      <!-- 左侧信息面板 -->
      <div class="left-panel">
        <div class="level-info">
          <h3>🎯 关卡信息</h3>
          <div class="level-details">
            <div class="level-number">第 {{ currentLevel }} 关</div>
            <div class="level-objective">
              <div class="objective-title">目标：</div>
              <div class="objective-text">{{ getLevelObjective() }}</div>
            </div>
            <div class="progress-bar">
              <div class="progress-label">进度</div>
              <div class="progress-track">
                <div 
                  class="progress-fill" 
                  :style="{ width: Math.min((score / targetScore) * 100, 100) + '%' }"
                ></div>
              </div>
              <div class="progress-text">{{ Math.min(Math.floor((score / targetScore) * 100), 100) }}%</div>
            </div>
          </div>
        </div>

        <div class="powerups-container">
          <h3>🔧 道具</h3>
          <div class="powerup-list">
            <div 
              v-for="powerup in powerups"
              :key="powerup.type"
              :class="['powerup-item', { disabled: powerup.count === 0 }]"
              @click="selectPowerUp(powerup.type)"
            >
              <div class="powerup-icon">{{ powerup.icon }}</div>
              <div class="powerup-info">
                <div class="powerup-name">{{ powerup.name }}</div>
                <div class="powerup-count">x{{ powerup.count }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="combo-display">
          <h3>🔥 连击</h3>
          <div class="combo-info">
            <div class="combo-counter">{{ comboCount }}x</div>
            <div class="combo-text">{{ getComboText() }}</div>
            <div class="combo-bar">
              <div 
                class="combo-fill" 
                :style="{ width: Math.min((comboCount / 10) * 100, 100) + '%' }"
              ></div>
            </div>
          </div>
        </div>

        <div class="controls-info">
          <h3>🎮 操作说明</h3>
          <div class="control-item">
            <span class="action">点击拖拽</span>
            <span class="desc">交换相邻宝石</span>
          </div>
          <div class="control-item">
            <span class="action">三个相连</span>
            <span class="desc">消除宝石得分</span>
          </div>
          <div class="control-item">
            <span class="action">四个相连</span>
            <span class="desc">生成特殊宝石</span>
          </div>
          <div class="control-item">
            <span class="action">五个相连</span>
            <span class="desc">生成彩虹宝石</span>
          </div>
        </div>
      </div>

      <!-- 游戏主区域 -->
      <div class="game-main">
        <div class="game-controls">
          <button @click="startGame" :disabled="gameRunning" class="control-btn start">
            {{ gameRunning ? '游戏进行中' : '开始游戏' }}
          </button>
          <button @click="pauseGame" :disabled="!gameRunning" class="control-btn pause">
            {{ gamePaused ? '继续' : '暂停' }}
          </button>
          <button @click="resetGame" class="control-btn reset">重新开始</button>
          <button @click="shuffleBoard" :disabled="!gameRunning || shuffleCount <= 0" class="control-btn shuffle">
            洗牌 ({{ shuffleCount }})
          </button>
        </div>

        <div class="game-board-wrapper">
          <div 
            class="game-board"
            :class="{ disabled: !gameRunning || gamePaused || isAnimating }"
          >
            <div
              v-for="(row, rowIndex) in board"
              :key="rowIndex"
              class="board-row"
            >
              <div
                v-for="(gem, colIndex) in row"
                :key="`${rowIndex}-${colIndex}`"
                :class="[
                  'gem-cell',
                  { 
                    selected: selectedGem && selectedGem.row === rowIndex && selectedGem.col === colIndex,
                    highlighted: isHighlighted(rowIndex, colIndex),
                    falling: gem.falling,
                    matched: gem.matched,
                    special: gem.special
                  }
                ]"
                @click="selectGem(rowIndex, colIndex)"
                @mouseenter="hoverGem(rowIndex, colIndex)"
                @mouseleave="unhoverGem()"
              >
                <div 
                  class="gem"
                  :style="{ 
                    backgroundColor: getGemColor(gem.type),
                    transform: gem.falling ? 'translateY(-100px)' : 'translateY(0)'
                  }"
                >
                  <div class="gem-icon">{{ getGemIcon(gem.type) }}</div>
                  <div v-if="gem.special" class="gem-special-effect"></div>
                  <div v-if="gem.multiplier > 1" class="gem-multiplier">{{ gem.multiplier }}x</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 游戏状态覆盖层 -->
          <div v-if="!gameRunning && !gameOver && !levelComplete" class="game-overlay start-overlay">
            <div class="overlay-content">
              <h2>🍭 准备开始</h2>
              <p>欢迎来到消消乐世界！</p>
              <p>连接三个或更多相同宝石来消除它们</p>
              <p>完成关卡目标获得星级评价</p>
              <button @click="startGame" class="overlay-btn">开始游戏</button>
            </div>
          </div>

          <div v-if="gamePaused" class="game-overlay pause-overlay">
            <div class="overlay-content">
              <h2>⏸️ 游戏暂停</h2>
              <p>点击继续按钮恢复游戏</p>
              <button @click="pauseGame" class="overlay-btn">继续游戏</button>
            </div>
          </div>

          <div v-if="gameOver" class="game-overlay game-over-overlay">
            <div class="overlay-content">
              <h2>💔 游戏结束</h2>
              <p>最终分数: <strong>{{ score.toLocaleString() }}</strong></p>
              <p>到达关卡: <strong>{{ currentLevel }}</strong></p>
              <div class="stars-display">
                <div class="star" v-for="i in 3" :key="i" :class="{ filled: i <= getStars() }">⭐</div>
              </div>
              <p v-if="isNewHighScore" class="new-record">🎉 新纪录！</p>
              <button @click="resetGame" class="overlay-btn">重新开始</button>
            </div>
          </div>

          <div v-if="levelComplete" class="game-overlay level-complete-overlay">
            <div class="overlay-content">
              <h2>🎊 关卡完成！</h2>
              <p>成功通过第 {{ currentLevel }} 关</p>
              <div class="stars-display">
                <div class="star" v-for="i in 3" :key="i" :class="{ filled: i <= getStars() }">⭐</div>
              </div>
              <p>获得分数: <strong>{{ levelScore.toLocaleString() }}</strong></p>
              <p>奖励道具: <strong>{{ levelRewards.join(', ') }}</strong></p>
              <button @click="nextLevel" class="overlay-btn">下一关</button>
            </div>
          </div>

          <!-- 连击提示 -->
          <div v-if="showComboText" class="combo-popup" :class="{ show: showComboText }">
            <div class="combo-popup-text">{{ comboPopupText }}</div>
          </div>

          <!-- 分数弹出 -->
          <div 
            v-for="scorePopup in scorePopups"
            :key="scorePopup.id"
            class="score-popup"
            :style="scorePopup.style"
          >
            +{{ scorePopup.score }}
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <div class="special-gems">
          <h3>💎 特殊宝石</h3>
          <div class="special-gem-list">
            <div class="special-gem-item">
              <div class="special-gem-icon">💥</div>
              <div class="special-gem-info">
                <div class="special-gem-name">炸弹宝石</div>
                <div class="special-gem-desc">消除周围3x3区域</div>
              </div>
            </div>
            <div class="special-gem-item">
              <div class="special-gem-icon">⚡</div>
              <div class="special-gem-info">
                <div class="special-gem-name">闪电宝石</div>
                <div class="special-gem-desc">消除整行或整列</div>
              </div>
            </div>
            <div class="special-gem-item">
              <div class="special-gem-icon">🌈</div>
              <div class="special-gem-info">
                <div class="special-gem-name">彩虹宝石</div>
                <div class="special-gem-desc">消除所有同色宝石</div>
              </div>
            </div>
          </div>
        </div>

        <div class="achievements">
          <h3>🏆 成就</h3>
          <div class="achievement-list">
            <div 
              v-for="achievement in achievements"
              :key="achievement.id"
              :class="['achievement', { unlocked: achievement.unlocked }]"
            >
              <div class="achievement-icon">{{ achievement.icon }}</div>
              <div class="achievement-text">
                <div class="achievement-name">{{ achievement.name }}</div>
                <div class="achievement-desc">{{ achievement.description }}</div>
                <div v-if="achievement.unlocked" class="achievement-progress">已解锁</div>
                <div v-else class="achievement-progress">{{ achievement.progress }}/{{ achievement.target }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="game-tips">
          <h3>💡 游戏提示</h3>
          <div class="tip-list">
            <div class="tip-item">寻找可以形成T型或L型的消除</div>
            <div class="tip-item">优先创造特殊宝石</div>
            <div class="tip-item">合理使用道具节省移动次数</div>
            <div class="tip-item">观察整个棋盘寻找最佳移动</div>
            <div class="tip-item">连击可以获得额外分数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 粒子效果容器 -->
    <div class="particles-container">
      <div
        v-for="particle in particles"
        :key="particle.id"
        class="particle"
        :style="particle.style"
      ></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'

export default {
  name: 'MatchThreeGame',
  setup() {
    // 游戏配置
    const BOARD_SIZE = 8
    const GEM_TYPES = ['red', 'blue', 'green', 'yellow', 'purple', 'orange']
    const SPECIAL_TYPES = ['bomb', 'lightning_h', 'lightning_v', 'rainbow']
    
    // 游戏状态
    const gameRunning = ref(false)
    const gamePaused = ref(false)
    const gameOver = ref(false)
    const levelComplete = ref(false)
    const isAnimating = ref(false)
    const score = ref(0)
    const currentLevel = ref(1)
    const movesLeft = ref(30)
    const targetScore = ref(1000)
    const highScore = ref(parseInt(localStorage.getItem('matchThreeHighScore') || '0'))
    const isNewHighScore = ref(false)
    const levelScore = ref(0)
    const shuffleCount = ref(3)
    
    // 连击系统
    const comboCount = ref(0)
    const comboMultiplier = ref(1)
    const showComboText = ref(false)
    const comboPopupText = ref('')
    
    // 游戏板
    const board = ref([])
    const selectedGem = ref(null)
    const hoveredGem = ref(null)
    const highlightedCells = ref([])
    
    // 道具系统
    const powerups = ref([
      { type: 'hammer', name: '锤子', icon: '🔨', count: 3, description: '消除单个宝石' },
      { type: 'bomb', name: '炸弹', icon: '💣', count: 2, description: '消除3x3区域' },
      { type: 'shuffle', name: '洗牌', icon: '🔄', count: 1, description: '重新排列棋盘' },
      { type: 'rainbow', name: '彩虹', icon: '🌈', count: 1, description: '消除所有同色宝石' }
    ])
    const selectedPowerUp = ref(null)
    
    // 特效系统
    const particles = ref([])
    const scorePopups = ref([])
    const levelRewards = ref([])
    
    // 成就系统
    const achievements = ref([
      { id: 1, name: '初学者', description: '完成第1关', icon: '🎯', unlocked: false, progress: 0, target: 1 },
      { id: 2, name: '连击高手', description: '达成10连击', icon: '🔥', unlocked: false, progress: 0, target: 10 },
      { id: 3, name: '分数达人', description: '单局得分10000', icon: '💯', unlocked: false, progress: 0, target: 10000 },
      { id: 4, name: '特殊宝石', description: '创造50个特殊宝石', icon: '💎', unlocked: false, progress: 0, target: 50 },
      { id: 5, name: '关卡征服者', description: '通过第10关', icon: '👑', unlocked: false, progress: 0, target: 10 }
    ])
    
    // 宝石颜色映射
    const gemColors = {
      red: '#ff4757',
      blue: '#3742fa',
      green: '#2ed573',
      yellow: '#ffa502',
      purple: '#a55eea',
      orange: '#ff6348',
      bomb: '#2f3542',
      lightning_h: '#ffd700',
      lightning_v: '#ffd700',
      rainbow: 'linear-gradient(45deg, #ff4757, #ffa502, #2ed573, #3742fa, #a55eea)'
    }
    
    // 宝石图标映射
    const gemIcons = {
      red: '💎',
      blue: '🔷',
      green: '💚',
      yellow: '⭐',
      purple: '🔮',
      orange: '🧡',
      bomb: '💥',
      lightning_h: '⚡',
      lightning_v: '⚡',
      rainbow: '🌈'
    }
    
    // 初始化游戏板
    const initializeBoard = () => {
      board.value = []
      for (let row = 0; row < BOARD_SIZE; row++) {
        board.value[row] = []
        for (let col = 0; col < BOARD_SIZE; col++) {
          board.value[row][col] = createRandomGem()
        }
      }
      
      // 确保初始状态没有匹配
      removeInitialMatches()
    }
    
    // 创建随机宝石
    const createRandomGem = () => {
      return {
        type: GEM_TYPES[Math.floor(Math.random() * GEM_TYPES.length)],
        special: false,
        matched: false,
        falling: false,
        multiplier: 1,
        id: Date.now() + Math.random()
      }
    }
    
    // 移除初始匹配
    const removeInitialMatches = () => {
      let hasMatches = true
      while (hasMatches) {
        hasMatches = false
        for (let row = 0; row < BOARD_SIZE; row++) {
          for (let col = 0; col < BOARD_SIZE; col++) {
            if (hasMatchAt(row, col)) {
              board.value[row][col] = createRandomGem()
              hasMatches = true
            }
          }
        }
      }
    }
    
    // 检查指定位置是否有匹配
    const hasMatchAt = (row, col) => {
      const gem = board.value[row][col]
      if (!gem || gem.special) return false
      
      // 检查水平匹配
      let horizontalCount = 1
      // 向左检查
      for (let c = col - 1; c >= 0 && board.value[row][c].type === gem.type; c--) {
        horizontalCount++
      }
      // 向右检查
      for (let c = col + 1; c < BOARD_SIZE && board.value[row][c].type === gem.type; c++) {
        horizontalCount++
      }
      
      // 检查垂直匹配
      let verticalCount = 1
      // 向上检查
      for (let r = row - 1; r >= 0 && board.value[r][col].type === gem.type; r--) {
        verticalCount++
      }
      // 向下检查
      for (let r = row + 1; r < BOARD_SIZE && board.value[r][col].type === gem.type; r++) {
        verticalCount++
      }
      
      return horizontalCount >= 3 || verticalCount >= 3
    }
    
    // 获取宝石颜色
    const getGemColor = (type) => {
      return gemColors[type] || '#ffffff'
    }
    
    // 获取宝石图标
    const getGemIcon = (type) => {
      return gemIcons[type] || '💎'
    }
    
    // 选择宝石
    const selectGem = (row, col) => {
      if (!gameRunning.value || gamePaused.value || isAnimating.value) return
      
      // 如果选择了道具
      if (selectedPowerUp.value) {
        usePowerUp(selectedPowerUp.value, row, col)
        selectedPowerUp.value = null
        return
      }
      
      const gem = board.value[row][col]
      if (!gem) return
      
      if (!selectedGem.value) {
        // 第一次选择
        selectedGem.value = { row, col }
        highlightPossibleMoves(row, col)
      } else if (selectedGem.value.row === row && selectedGem.value.col === col) {
        // 取消选择
        selectedGem.value = null
        highlightedCells.value = []
      } else if (isAdjacent(selectedGem.value.row, selectedGem.value.col, row, col)) {
        // 交换相邻宝石
        swapGems(selectedGem.value.row, selectedGem.value.col, row, col)
        selectedGem.value = null
        highlightedCells.value = []
      } else {
        // 选择新的宝石
        selectedGem.value = { row, col }
        highlightPossibleMoves(row, col)
      }
    }
    
    // 检查是否相邻
    const isAdjacent = (row1, col1, row2, col2) => {
      const rowDiff = Math.abs(row1 - row2)
      const colDiff = Math.abs(col1 - col2)
      return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1)
    }
    
    // 高亮可能的移动
    const highlightPossibleMoves = (row, col) => {
      highlightedCells.value = []
      const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]]
      
      directions.forEach(([dr, dc]) => {
        const newRow = row + dr
        const newCol = col + dc
        
        if (newRow >= 0 && newRow < BOARD_SIZE && newCol >= 0 && newCol < BOARD_SIZE) {
          // 模拟交换并检查是否会产生匹配
          swapGemsTemporary(row, col, newRow, newCol)
          if (hasMatchAt(row, col) || hasMatchAt(newRow, newCol)) {
            highlightedCells.value.push({ row: newRow, col: newCol })
          }
          // 恢复交换
          swapGemsTemporary(row, col, newRow, newCol)
        }
      })
    }
    
    // 临时交换宝石（用于检查）
    const swapGemsTemporary = (row1, col1, row2, col2) => {
      const temp = board.value[row1][col1]
      board.value[row1][col1] = board.value[row2][col2]
      board.value[row2][col2] = temp
    }
    
    // 交换宝石
    const swapGems = async (row1, col1, row2, col2) => {
      if (movesLeft.value <= 0) return
      
      // 交换宝石
      swapGemsTemporary(row1, col1, row2, col2)
      
      // 检查是否有匹配
      const hasMatch1 = hasMatchAt(row1, col1)
      const hasMatch2 = hasMatchAt(row2, col2)
      
      if (hasMatch1 || hasMatch2) {
        // 有效移动
        movesLeft.value--
        isAnimating.value = true
        
        // 处理匹配
        await processMatches()
        
        isAnimating.value = false
        
        // 检查游戏结束条件
        checkGameEnd()
      } else {
        // 无效移动，恢复
        swapGemsTemporary(row1, col1, row2, col2)
      }
    }
    
    // 处理匹配
    const processMatches = async () => {
      let totalMatches = 0
      let currentCombo = 0
      
      while (true) {
        const matches = findMatches()
        if (matches.length === 0) break
        
        currentCombo++
        totalMatches += matches.length
        
        // 标记匹配的宝石
        matches.forEach(match => {
          board.value[match.row][match.col].matched = true
        })
        
        // 计算分数
        const matchScore = calculateMatchScore(matches, currentCombo)
        score.value += matchScore
        levelScore.value += matchScore
        
        // 显示分数弹出
        showScorePopup(matches[0].row, matches[0].col, matchScore)
        
        // 创建特殊宝石
        createSpecialGems(matches)
        
        // 创建粒子效果
        matches.forEach(match => {
          createParticles(match.row, match.col, getGemColor(match.type))
        })
        
        // 等待动画
        await new Promise(resolve => setTimeout(resolve, 300))
        
        // 移除匹配的宝石
        removeMatchedGems()
        
        // 掉落宝石
        await dropGems()
        
        // 填充新宝石
        fillEmptySpaces()
        
        // 等待掉落动画
        await new Promise(resolve => setTimeout(resolve, 500))
      }
      
      // 更新连击
      if (currentCombo > 0) {
        comboCount.value = Math.max(comboCount.value, currentCombo)
        if (currentCombo > 1) {
          showComboPopup(currentCombo)
        }
      }
      
      // 检查成就
      checkAchievements()
    }
    
    // 查找匹配
    const findMatches = () => {
      const matches = []
      const visited = new Set()
      
      for (let row = 0; row < BOARD_SIZE; row++) {
        for (let col = 0; col < BOARD_SIZE; col++) {
          const key = `${row}-${col}`
          if (visited.has(key)) continue
          
          const gem = board.value[row][col]
          if (!gem || gem.matched || gem.special) continue
          
          // 查找水平匹配
          const horizontalMatches = findHorizontalMatches(row, col)
          if (horizontalMatches.length >= 3) {
            horizontalMatches.forEach(match => {
              matches.push(match)
              visited.add(`${match.row}-${match.col}`)
            })
          }
          
          // 查找垂直匹配
          const verticalMatches = findVerticalMatches(row, col)
          if (verticalMatches.length >= 3) {
            verticalMatches.forEach(match => {
              matches.push(match)
              visited.add(`${match.row}-${match.col}`)
            })
          }
        }
      }
      
      return matches
    }
    
    // 查找水平匹配
    const findHorizontalMatches = (row, col) => {
      const matches = []
      const gem = board.value[row][col]
      
      let startCol = col
      let endCol = col
      
      // 向左扩展
      while (startCol > 0 && board.value[row][startCol - 1].type === gem.type) {
        startCol--
      }
      
      // 向右扩展
      while (endCol < BOARD_SIZE - 1 && board.value[row][endCol + 1].type === gem.type) {
        endCol++
      }
      
      if (endCol - startCol + 1 >= 3) {
        for (let c = startCol; c <= endCol; c++) {
          matches.push({ row, col: c, type: gem.type })
        }
      }
      
      return matches
    }
    
    // 查找垂直匹配
    const findVerticalMatches = (row, col) => {
      const matches = []
      const gem = board.value[row][col]
      
      let startRow = row
      let endRow = row
      
      // 向上扩展
      while (startRow > 0 && board.value[startRow - 1][col].type === gem.type) {
        startRow--
      }
      
      // 向下扩展
      while (endRow < BOARD_SIZE - 1 && board.value[endRow + 1][col].type === gem.type) {
        endRow++
      }
      
      if (endRow - startRow + 1 >= 3) {
        for (let r = startRow; r <= endRow; r++) {
          matches.push({ row: r, col, type: gem.type })
        }
      }
      
      return matches
    }
    
    // 计算匹配分数
    const calculateMatchScore = (matches, combo) => {
      let baseScore = matches.length * 100
      let comboBonus = combo > 1 ? (combo - 1) * 50 : 0
      return baseScore + comboBonus
    }
    
    // 创建特殊宝石
    const createSpecialGems = (matches) => {
      // 根据匹配数量创建特殊宝石
      if (matches.length >= 5) {
        // 彩虹宝石
        const centerMatch = matches[Math.floor(matches.length / 2)]
        board.value[centerMatch.row][centerMatch.col] = {
          type: 'rainbow',
          special: true,
          matched: false,
          falling: false,
          multiplier: 1,
          id: Date.now() + Math.random()
        }
      } else if (matches.length === 4) {
        // 闪电宝石
        const centerMatch = matches[Math.floor(matches.length / 2)]
        const isHorizontal = matches.every(m => m.row === matches[0].row)
        board.value[centerMatch.row][centerMatch.col] = {
          type: isHorizontal ? 'lightning_v' : 'lightning_h',
          special: true,
          matched: false,
          falling: false,
          multiplier: 1,
          id: Date.now() + Math.random()
        }
      }
    }
    
    // 移除匹配的宝石
    const removeMatchedGems = () => {
      for (let row = 0; row < BOARD_SIZE; row++) {
        for (let col = 0; col < BOARD_SIZE; col++) {
          if (board.value[row][col].matched) {
            board.value[row][col] = null
          }
        }
      }
    }
    
    // 宝石掉落
    const dropGems = async () => {
      for (let col = 0; col < BOARD_SIZE; col++) {
        let writeIndex = BOARD_SIZE - 1
        
        for (let row = BOARD_SIZE - 1; row >= 0; row--) {
          if (board.value[row][col] !== null) {
            if (row !== writeIndex) {
              board.value[writeIndex][col] = board.value[row][col]
              board.value[row][col] = null
              board.value[writeIndex][col].falling = true
            }
            writeIndex--
          }
        }
      }
      
      // 重置掉落状态
      setTimeout(() => {
        for (let row = 0; row < BOARD_SIZE; row++) {
          for (let col = 0; col < BOARD_SIZE; col++) {
            if (board.value[row][col]) {
              board.value[row][col].falling = false
            }
          }
        }
      }, 300)
    }
    
    // 填充空白位置
    const fillEmptySpaces = () => {
      for (let row = 0; row < BOARD_SIZE; row++) {
        for (let col = 0; col < BOARD_SIZE; col++) {
          if (board.value[row][col] === null) {
            board.value[row][col] = createRandomGem()
            board.value[row][col].falling = true
          }
        }
      }
    }
    
    // 检查是否高亮
    const isHighlighted = (row, col) => {
      return highlightedCells.value.some(cell => cell.row === row && cell.col === col)
    }
    
    // 鼠标悬停
    const hoverGem = (row, col) => {
      hoveredGem.value = { row, col }
    }
    
    // 鼠标离开
    const unhoverGem = () => {
      hoveredGem.value = null
    }
    
    // 选择道具
    const selectPowerUp = (type) => {
      const powerup = powerups.value.find(p => p.type === type)
      if (powerup && powerup.count > 0) {
        selectedPowerUp.value = type
      }
    }
    
    // 使用道具
    const usePowerUp = (type, row, col) => {
      const powerup = powerups.value.find(p => p.type === type)
      if (!powerup || powerup.count <= 0) return
      
      powerup.count--
      
      switch (type) {
        case 'hammer':
          // 消除单个宝石
          board.value[row][col] = createRandomGem()
          break
        case 'bomb':
          // 消除3x3区域
          for (let r = Math.max(0, row - 1); r <= Math.min(BOARD_SIZE - 1, row + 1); r++) {
            for (let c = Math.max(0, col - 1); c <= Math.min(BOARD_SIZE - 1, col + 1); c++) {
              board.value[r][c] = createRandomGem()
            }
          }
          break
        case 'shuffle':
          shuffleBoard()
          break
        case 'rainbow':
          // 消除所有同色宝石
          const targetType = board.value[row][col].type
          for (let r = 0; r < BOARD_SIZE; r++) {
            for (let c = 0; c < BOARD_SIZE; c++) {
              if (board.value[r][c].type === targetType) {
                board.value[r][c] = createRandomGem()
              }
            }
          }
          break
      }
      
      // 处理道具使用后的匹配
      processMatches()
    }
    
    // 洗牌
    const shuffleBoard = () => {
      if (shuffleCount.value <= 0) return
      
      shuffleCount.value--
      
      // 收集所有非特殊宝石
      const gems = []
      for (let row = 0; row < BOARD_SIZE; row++) {
        for (let col = 0; col < BOARD_SIZE; col++) {
          if (!board.value[row][col].special) {
            gems.push(board.value[row][col].type)
          }
        }
      }
      
      // 洗牌
      for (let i = gems.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[gems[i], gems[j]] = [gems[j], gems[i]]
      }
      
      // 重新分配
      let gemIndex = 0
      for (let row = 0; row < BOARD_SIZE; row++) {
        for (let col = 0; col < BOARD_SIZE; col++) {
          if (!board.value[row][col].special) {
            board.value[row][col].type = gems[gemIndex++]
          }
        }
      }
    }
    
    // 显示连击弹出
    const showComboPopup = (combo) => {
      comboPopupText.value = `${combo}连击！`
      showComboText.value = true
      
      setTimeout(() => {
        showComboText.value = false
      }, 2000)
    }
    
    // 显示分数弹出
    const showScorePopup = (row, col, score) => {
      const popup = {
        id: Date.now() + Math.random(),
        score,
        style: {
          position: 'absolute',
          left: `${col * 60 + 30}px`,
          top: `${row * 60 + 30}px`,
          color: '#ffd700',
          fontSize: '20px',
          fontWeight: 'bold',
          pointerEvents: 'none',
          animation: 'scorePopup 1s ease-out forwards',
          zIndex: 1000
        }
      }
      
      scorePopups.value.push(popup)
      
      setTimeout(() => {
        scorePopups.value = scorePopups.value.filter(p => p.id !== popup.id)
      }, 1000)
    }
    
    // 创建粒子效果
    const createParticles = (row, col, color) => {
      for (let i = 0; i < 6; i++) {
        const particle = {
          id: Date.now() + Math.random(),
          style: {
            position: 'absolute',
            left: `${col * 60 + 30}px`,
            top: `${row * 60 + 30}px`,
            width: '6px',
            height: '6px',
            backgroundColor: color,
            borderRadius: '50%',
            pointerEvents: 'none',
            animation: `particleExplode 1s ease-out forwards`,
            animationDelay: `${i * 0.1}s`
          }
        }
        
        particles.value.push(particle)
        
        setTimeout(() => {
          particles.value = particles.value.filter(p => p.id !== particle.id)
        }, 1000 + i * 100)
      }
    }
    
    // 获取关卡目标描述
    const getLevelObjective = () => {
      return `达到 ${targetScore.value.toLocaleString()} 分`
    }
    
    // 获取连击文本
    const getComboText = () => {
      if (comboCount.value === 0) return '无连击'
      if (comboCount.value < 3) return '不错！'
      if (comboCount.value < 5) return '很棒！'
      if (comboCount.value < 8) return '惊人！'
      return '无敌！'
    }
    
    // 获取星级评价
    const getStars = () => {
      const progress = score.value / targetScore.value
      if (progress >= 2) return 3
      if (progress >= 1.5) return 2
      if (progress >= 1) return 1
      return 0
    }
    
    // 检查游戏结束
    const checkGameEnd = () => {
      if (score.value >= targetScore.value) {
        // 关卡完成
        levelComplete.value = true
        gameRunning.value = false
        
        // 计算奖励
        const stars = getStars()
        levelRewards.value = []
        if (stars >= 1) levelRewards.value.push('锤子 x1')
        if (stars >= 2) levelRewards.value.push('炸弹 x1')
        if (stars >= 3) levelRewards.value.push('洗牌 x1')
        
        // 添加奖励道具
        levelRewards.value.forEach(reward => {
          if (reward.includes('锤子')) {
            powerups.value.find(p => p.type === 'hammer').count++
          } else if (reward.includes('炸弹')) {
            powerups.value.find(p => p.type === 'bomb').count++
          } else if (reward.includes('洗牌')) {
            shuffleCount.value++
          }
        })
        
      } else if (movesLeft.value <= 0) {
        // 游戏结束
        endGame()
      }
    }
    
    // 下一关
    const nextLevel = () => {
      currentLevel.value++
      levelComplete.value = false
      
      // 重置关卡数据
      movesLeft.value = Math.max(25, 35 - currentLevel.value)
      targetScore.value = 1000 + (currentLevel.value - 1) * 500
      levelScore.value = 0
      comboCount.value = 0
      
      // 重新初始化游戏板
      initializeBoard()
      startGame()
    }
    
    // 检查成就
    const checkAchievements = () => {
      // 初学者：完成第1关
      if (currentLevel.value >= 1 && !achievements.value[0].unlocked) {
        achievements.value[0].unlocked = true
        achievements.value[0].progress = currentLevel.value
      }
      
      // 连击高手：达成10连击
      if (comboCount.value >= 10 && !achievements.value[1].unlocked) {
        achievements.value[1].unlocked = true
        achievements.value[1].progress = comboCount.value
      }
      
      // 分数达人：单局得分10000
      if (score.value >= 10000 && !achievements.value[2].unlocked) {
        achievements.value[2].unlocked = true
        achievements.value[2].progress = score.value
      }
      
      // 关卡征服者：通过第10关
      if (currentLevel.value >= 10 && !achievements.value[4].unlocked) {
        achievements.value[4].unlocked = true
        achievements.value[4].progress = currentLevel.value
      }
      
      // 更新进度
      achievements.value[0].progress = Math.max(achievements.value[0].progress, currentLevel.value)
      achievements.value[1].progress = Math.max(achievements.value[1].progress, comboCount.value)
      achievements.value[2].progress = Math.max(achievements.value[2].progress, score.value)
      achievements.value[4].progress = Math.max(achievements.value[4].progress, currentLevel.value)
    }
    
    // 游戏控制方法
    const startGame = () => {
      if (gameRunning.value) return
      
      gameRunning.value = true
      gamePaused.value = false
      gameOver.value = false
      levelComplete.value = false
      
      if (board.value.length === 0) {
        initializeBoard()
      }
    }
    
    const pauseGame = () => {
      if (!gameRunning.value) return
      gamePaused.value = !gamePaused.value
    }
    
    const resetGame = () => {
      gameRunning.value = false
      gamePaused.value = false
      gameOver.value = false
      levelComplete.value = false
      score.value = 0
      currentLevel.value = 1
      movesLeft.value = 30
      targetScore.value = 1000
      levelScore.value = 0
      comboCount.value = 0
      shuffleCount.value = 3
      isNewHighScore.value = false
      
      // 重置道具
      powerups.value.forEach(powerup => {
        switch (powerup.type) {
          case 'hammer': powerup.count = 3; break
          case 'bomb': powerup.count = 2; break
          case 'shuffle': powerup.count = 1; break
          case 'rainbow': powerup.count = 1; break
        }
      })
      
      // 重置成就
      achievements.value.forEach(achievement => {
        achievement.unlocked = false
        achievement.progress = 0
      })
      
      selectedGem.value = null
      selectedPowerUp.value = null
      highlightedCells.value = []
      particles.value = []
      scorePopups.value = []
      
      initializeBoard()
    }
    
    const endGame = () => {
      gameRunning.value = false
      gameOver.value = true
      
      // 检查最高分
      if (score.value > highScore.value) {
        highScore.value = score.value
        isNewHighScore.value = true
        localStorage.setItem('matchThreeHighScore', score.value.toString())
      }
    }
    
    // 生命周期
    onMounted(() => {
      initializeBoard()
    })
    
    return {
      // 响应式数据
      gameRunning,
      gamePaused,
      gameOver,
      levelComplete,
      isAnimating,
      score,
      currentLevel,
      movesLeft,
      targetScore,
      highScore,
      isNewHighScore,
      levelScore,
      shuffleCount,
      comboCount,
      showComboText,
      comboPopupText,
      board,
      selectedGem,
      hoveredGem,
      powerups,
      selectedPowerUp,
      particles,
      scorePopups,
      levelRewards,
      achievements,
      
      // 方法
      startGame,
      pauseGame,
      resetGame,
      nextLevel,
      selectGem,
      hoverGem,
      unhoverGem,
      selectPowerUp,
      shuffleBoard,
      isHighlighted,
      getGemColor,
      getGemIcon,
      getLevelObjective,
      getComboText,
      getStars
    }
  }
}
</script>

<style scoped>
.match-three-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  color: #333;
  position: relative;
}

.game-header {
  text-align: center;
  margin-bottom: 30px;
}

.game-header h1 {
  font-size: 3em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: candyGlow 3s ease infinite;
}

@keyframes candyGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: rgba(255,255,255,0.9);
  padding: 15px 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  text-align: center;
  min-width: 100px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.stat-label {
  font-size: 0.9em;
  opacity: 0.8;
  margin-bottom: 5px;
  color: #666;
}

.stat-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #667eea;
  text-shadow: 0 0 10px rgba(102,126,234,0.3);
}

.game-content {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 30px;
  align-items: start;
}

.left-panel, .right-panel {
  background: rgba(255,255,255,0.9);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.level-info, .powerups-container, .combo-display, .controls-info {
  margin-bottom: 25px;
}

.level-info h3, .powerups-container h3, .combo-display h3, .controls-info h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #667eea;
  text-shadow: 0 0 10px rgba(102,126,234,0.3);
}

.level-number {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: #667eea;
  margin-bottom: 10px;
}

.objective-title {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.objective-text {
  color: #666;
  margin-bottom: 15px;
}

.progress-bar {
  margin-top: 10px;
}

.progress-label {
  font-size: 0.9em;
  margin-bottom: 5px;
  color: #666;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8em;
  text-align: center;
  margin-top: 5px;
  color: #666;
}

.powerup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.powerup-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.powerup-item:hover:not(.disabled) {
  border-color: #667eea;
  background: rgba(102,126,234,0.1);
  transform: translateY(-2px);
}

.powerup-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.powerup-icon {
  font-size: 1.5em;
  margin-right: 12px;
}

.powerup-info {
  flex: 1;
}

.powerup-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.powerup-count {
  font-size: 0.9em;
  color: #667eea;
  font-weight: bold;
}

.combo-info {
  text-align: center;
}

.combo-counter {
  font-size: 2em;
  font-weight: bold;
  color: #ff6b6b;
  text-shadow: 0 0 10px rgba(255,107,107,0.5);
  margin-bottom: 5px;
}

.combo-text {
  font-size: 1.1em;
  color: #667eea;
  margin-bottom: 10px;
}

.combo-bar {
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  overflow: hidden;
}

.combo-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  transition: width 0.3s ease;
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.control-item .action {
  font-weight: bold;
  color: #667eea;
}

.control-item .desc {
  color: #666;
}

.game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.control-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  text-transform: uppercase;
}

.control-btn.start {
  background: linear-gradient(45deg, #48dbfb, #0abde3);
  color: white;
  box-shadow: 0 0 20px rgba(72,219,251,0.3);
}

.control-btn.pause {
  background: linear-gradient(45deg, #feca57, #ff9ff3);
  color: white;
  box-shadow: 0 0 20px rgba(254,202,87,0.3);
}

.control-btn.reset {
  background: linear-gradient(45deg, #ff6b6b, #ee5a52);
  color: white;
  box-shadow: 0 0 20px rgba(255,107,107,0.3);
}

.control-btn.shuffle {
  background: linear-gradient(45deg, #a55eea, #8854d0);
  color: white;
  box-shadow: 0 0 20px rgba(165,94,234,0.3);
}

.control-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

.control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.game-board-wrapper {
  position: relative;
  border: 3px solid #667eea;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(102,126,234,0.5);
  background: rgba(255,255,255,0.9);
}

.game-board {
  display: grid;
  grid-template-rows: repeat(8, 60px);
  gap: 2px;
  padding: 10px;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
}

.game-board.disabled {
  pointer-events: none;
  opacity: 0.7;
}

.board-row {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  gap: 2px;
}

.gem-cell {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.gem-cell:hover {
  transform: scale(1.05);
}

.gem-cell.selected {
  border: 3px solid #ffd700;
  box-shadow: 0 0 15px rgba(255,215,0,0.8);
}

.gem-cell.highlighted {
  border: 2px solid #48dbfb;
  box-shadow: 0 0 10px rgba(72,219,251,0.6);
}

.gem {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.gem-icon {
  font-size: 1.8em;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

.gem-special-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: specialGlow 2s infinite;
}

@keyframes specialGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.gem-multiplier {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ffd700;
  color: #333;
  font-size: 0.7em;
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(255,215,0,0.5);
}

.gem-cell.falling .gem {
  animation: gemFall 0.5s ease-out;
}

@keyframes gemFall {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.gem-cell.matched .gem {
  animation: gemMatch 0.3s ease-out forwards;
}

@keyframes gemMatch {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  backdrop-filter: blur(10px);
}

.overlay-content {
  background: rgba(255,255,255,0.95);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 0 30px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.3);
}

.overlay-content h2 {
  margin-bottom: 20px;
  color: #667eea;
  text-shadow: 0 0 10px rgba(102,126,234,0.3);
}

.overlay-content p {
  margin-bottom: 15px;
  color: #666;
  line-height: 1.6;
}

.overlay-btn {
  padding: 15px 30px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(102,126,234,0.3);
  margin-top: 10px;
}

.overlay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(102,126,234,0.5);
}

.stars-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.star {
  font-size: 2em;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.star.filled {
  opacity: 1;
  animation: starGlow 1s ease infinite alternate;
}

@keyframes starGlow {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.new-record {
  color: #ffd700;
  font-weight: bold;
  font-size: 1.2em;
  text-shadow: 0 0 10px rgba(255,215,0,0.5);
  animation: recordGlow 2s ease infinite;
}

@keyframes recordGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.combo-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  color: white;
  padding: 20px 30px;
  border-radius: 15px;
  font-size: 1.5em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  box-shadow: 0 0 30px rgba(255,107,107,0.5);
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.combo-popup.show {
  opacity: 1;
  animation: comboPopup 2s ease-out;
}

@keyframes comboPopup {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.score-popup {
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 1000;
}

@keyframes scorePopup {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-40px) scale(1); opacity: 0; }
}

.special-gems, .achievements, .game-tips {
  margin-bottom: 25px;
}

.special-gems h3, .achievements h3, .game-tips h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #667eea;
  text-shadow: 0 0 10px rgba(102,126,234,0.3);
}

.special-gem-list, .achievement-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.special-gem-item, .achievement {
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.special-gem-item:hover, .achievement:hover {
  border-color: #667eea;
  background: rgba(102,126,234,0.1);
}

.achievement.unlocked {
  background: rgba(255,215,0,0.2);
  border-color: #ffd700;
}

.special-gem-icon, .achievement-icon {
  font-size: 1.5em;
  margin-right: 12px;
}

.special-gem-info, .achievement-text {
  flex: 1;
}

.special-gem-name, .achievement-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.special-gem-desc, .achievement-desc {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 2px;
}

.achievement-progress {
  font-size: 0.8em;
  color: #667eea;
  font-weight: bold;
}

.tip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-item {
  padding: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 8px;
  font-size: 0.9em;
  color: #666;
  border-left: 3px solid #667eea;
}

.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

.particle {
  border-radius: 50%;
  pointer-events: none;
}

@keyframes particleExplode {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--random-x, 50px), var(--random-y, -50px)) scale(0);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .game-content {
    grid-template-columns: 250px 1fr 250px;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    padding: 15px;
  }
}

@media (max-width: 1000px) {
  .game-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    display: none;
  }
  
  .game-main {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .match-three-container {
    padding: 10px;
  }
  
  .game-header h1 {
    font-size: 2em;
  }
  
  .game-stats {
    gap: 10px;
  }
  
  .stat-card {
    padding: 10px 15px;
    min-width: 80px;
  }
  
  .stat-value {
    font-size: 1.2em;
  }
  
  .game-controls {
    gap: 10px;
  }
  
  .control-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .board-row {
    grid-template-columns: repeat(8, 45px);
  }
  
  .gem-cell {
    width: 45px;
    height: 45px;
  }
  
  .gem-icon {
    font-size: 1.4em;
  }
  
  .overlay-content {
    padding: 30px 20px;
    margin: 20px;
  }
}

@media (max-width: 480px) {
  .game-header h1 {
    font-size: 1.8em;
  }
  
  .game-stats {
    flex-direction: column;
    align-items: center;
  }
  
  .board-row {
    grid-template-columns: repeat(8, 35px);
  }
  
  .gem-cell {
    width: 35px;
    height: 35px;
  }
  
  .gem-icon {
    font-size: 1.2em;
  }
  
  .control-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* 特殊动画效果 */
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.gem[style*="rainbow"] {
  animation: rainbow 2s linear infinite;
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* 成功动画 */
@keyframes success {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.success-animation {
  animation: success 0.6s ease-in-out;
}

/* 错误动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.error-animation {
  animation: shake 0.5s ease-in-out;
}
</style>